<div id="editeventsection">



    <legend>Add New Event</legend>


    <form id="add-event"  method="post">
        <div class="span4">

<input type="hidden" name="event-id" id="event-id" value=""/>
            <p>
                <label for="event-name" >Event Name</label>
                <input type="text" required name="event-name" id="event-name" class="input-xlarge" placeholder="Enter the name of Event">
            </p>
            <p>
                <label for="event-date" >Event Date</label>
                <input type="date" required name="event-date" readonly id="event-date" class="input-medium cursor-pointer" placeholder="Enter the Date of Event">
            </p>

            <p class="input-prepend input-append">
                <label for="event-time" >Event Time</label>
                <span class="add-on">Hours. </span><input type="time"  required name="event-time" id="event-time" class="input-small cursor-pointer" placeholder="Time of Event" readonly>
            </p>
            <br>

            <p>

        </div>
        <div class="span4">

            <p>
                <label for="eco-passes" >No. of Economy Passes</label>
                <input type="number" required name="eco-passes" id="eco-passes" class="input-small" placeholder="No. of Passes">
            </p>

            <p class="input-prepend input-append">
                <label for="eco-price" >Economy Pass Price</label>
                <span class="add-on">Rs. </span><input type="number" name="eco-price" id="eco-price" required class="span2" placeholder="Price of a Pass">
            </p>
            <br>
            <p>

                <label for="event-venue" >Event Venue</label>
                <input type="text" required name="event-venue" id="event-venue" class="input-xlarge" placeholder="Enter the Venue of Event">
            </p>

        </div>
        <div class="span3">

            <p>
                <label for="vip-passes" >No. of VIP Passes</label>
                <input type="number" required name="vip-passes" id="vip-passes" class="input-small" placeholder="No. of Passes">
            </p>

            <p class="input-prepend input-append">
                <label for="vip-price" >VIP Pass Price</label>
                <span class="add-on">Rs. </span><input type="number" name="vip-price" id="vip-price" required class="span2" placeholder="Price of a Pass">
            </p>
            <br>



        </div>

        <div class="clearfix"></div>	


        <div class="span11"> 

            <p class="textarea-nice">
                <label for="event-description" >Event Description</label>
                <textarea name="event-description" class="input-block-level" id="event-description" required rows="9" cols="16"> </textarea>
            </p>



            <p>
                <label class="checkbox">
                    <input type="checkbox" id="event-checkbox" name="event-checkbox" value="active"> Check the box to display event at front end [active/inactive].
                </label>

            </p>
        </div>
        <br>
    </form>

    <div class="span11">


        <form id="add-eventimagepath" name="addeventimagepath" enctype="multipart/form-data" action="ImageUploadServlet" method="post">

            <p><!--
                <label for="event-image" >Select the image for the Event</label>
                <input type="file" id="event-image" name="event-image" required class="input-xlarge">-->
            </p>
        </form>

        <p>
            <input type="button" id="editeventsavebutton" class="btn btn-primary btn-large" value="Save" onclick="uploadImage()" >
            <span class="text-success"> Display the "succesfully saved" message here on successfull submission</span>
        </p>
    </div>

    <div class="clearfix"></div>    










    <script src="js/jquery-ui-1.8.20.custom.min.js"></script><!-- including jquery UI Datepicker js-->
    <script src="js/nicEdit.js"></script><!-- including nicedit js-->
    <script src="js/jquery-ui-timepicker-addon.js"></script><!-- including jquery UI timepicker js-->
    <script src="js/jquery.validate.min.js"></script><!-- including the validation js-->
    <script type="text/javascript">
			
        $(document).ready(function() { 
			 
			
            $('#event-time').timepicker() ;//calling timepicker on event-time textbox
			 
            $( "#event-date" ).datepicker({ //call the datepicker on date input
                
                dateFormat: "yy-mm-dd",
                changeMonth: true,
                changeYear: true,
                yearRange:"+0:+1",
                minDate: new Date(),
            });
				 
				
				 
            // form validation
            $("#add-event").validate();
				 
        });
		
        bkLib.onDomLoaded(function() { //assigning nicedit to textarea 
            new nicEditor({fullPanel : true,iconsPath : 'js/nicEditorIcons.gif',xhtml: true}).panelInstance('event-description');
        });
    </script>
    <script src="js/main.js"></script>


</div>
